<template>
  <d2-container>
    <div class="flex">
      <div class="p-4 flex-1 mr-4" style="background-color:rgba(0,0,0,.1);">
        <div class="theme-front-color">累计减排量</div>
        <div style="height:200px;" class="flex flex-col items-center justify-center">
          <div class="flex items-center">
            <img class="w-10 h-10" src="../../assets/co2/leaf.png" />
            <span class="px-4 font-bold text-3xl theme-front-color">{{res.ljco2}}</span>
            <span class="theme-front-color text-sm">tCO2e</span>
          </div>
          <div class="py-2 theme-front-color text-sm">相当于收益</div>
          <div class="flex items-center">
            <img class="w-10 h-10" src="../../assets/co2/cash.png" />
            <span class="px-4 font-bold text-3xl theme-front-color">{{res.ljco2Money}}</span>
            <span class="theme-front-color text-sm">¥</span>
          </div>
        </div>
      </div>
      <div class="p-4 flex-1 mr-4" style="background-color:rgba(0,0,0,.1);">
        <div class="theme-front-color">当年减排目标</div>
        <div style="height:200px;" class="flex items-center justify-center">
          <div style="width:200px;height:200px;">
            <dv-charts :option="pieOption" />
          </div>
          <div class="flex-1">
            <div>
              <span class="theme-front-color font-bold text-2xl pr-4">{{res.totalTarget}}</span>
              <span class="theme-front-color text-sm">tCO2e</span>
            </div>
            <div class="theme-front-color text-sm mt-2">当年减排目标</div>
            <div class="mt-6">
              <span class="theme-front-color font-bold text-2xl pr-4">{{res.totalPfValue}}</span>
              <span class="theme-front-color text-sm">tCO2e</span>
            </div>
            <div class="theme-front-color text-sm mt-2">当年实际减排量</div>
          </div>
        </div>
      </div>
      <div class="p-4 flex-1" style="background-color:rgba(0,0,0,.1);">
        <div class="theme-front-color">项目减排信息</div>
        <dv-scroll-board :config="tableConfig" style="height:180px;" class="w-full mt-5" />
      </div>
    </div>

    <div class="flex mt-4">
      <div class="p-4 flex-1 mr-4" style="background-color:rgba(0,0,0,.1);">
        <div class="theme-front-color">减排活动占比</div>
        <dv-active-ring-chart :config="ringConfig" style="height:180px;" class="w-full mt-5" />
      </div>
      <div class="p-4 flex-2" style="background-color:rgba(0,0,0,.1);">
        <div class="theme-front-color">预估减排量</div>
        <div id="manage-line" style="height:180px;" class="w-full mt-5" />
      </div>
    </div>

    <div class="flex mt-4">
      <div class="p-4 flex-1" style="background-color:rgba(0,0,0,.1);">
        <div class="theme-front-color">减排历史</div>
        <div id="manage-bar" style="height:250px;" class="w-full mt-5" />
      </div>
    </div>
  </d2-container>
</template>

<script>
  import { mapGetters } from 'vuex'
  import * as echarts from 'echarts'

  export default {
    data() {
      return {
        res:{},
        pieOption: {
          series: [
            {
              type: 'gauge',
              startAngle: -Math.PI / 2,
              endAngle: Math.PI * 1.5,
              arcLineWidth: 10,
              data: [
              //  { name: 'itemA', value: 10 }
              ],
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              pointer: {
                show: false
              },
              dataItemStyle: {
                lineCap: 'round'
              },
              details: {
                show: true,
                formatter: '{value}%',
                valueToFixed: 2,
                style: {
                  fill: '#1ed3e5',
                  fontSize: 30
                }
              }
            }
          ]
        },
        tableConfig: {
          header: ['项目名称', '项目类型', '减排量（tCO2e）'],
          // columnWidth: [200, 100, 100],
          rowNum: 4,
          headerBGC: '#3098d5',
          data: [
            // ['甘肃酒泉-50MW并网光伏项目', '自主减排', '23141.11'],
            // ['项目名称项目名称项目名称', '自主减排', '23141.11'],
            // ['项目名称项目名称', '自主减排', '23141.11'],
            // ['项目名称', 'CCER', '23141.11']
          ]
        },
        ringConfig: {
          data: [
            {
              name: '光伏',
              value: 100
            }
          ],
          lineWidth: 15,
          radius: '80%',
          activeRadius: '90%'
        },
      }
    },
    created() {
      this.getPowerDataList()

    },
    computed: {
      ...mapGetters('d2admin/theme', ['activeSetting'])
    },
    methods: {
      getPowerDataList() {
        this.meterdataList = []
        this.$api.okhttp({
          url:this.$http.adornUrl('/co2/manage/list'),
          method: "post",
          data: this.$http.adornParams(
            {
              customerId: this.$util.cookies.get("customer_id"),
              projectId:this.$util.cookies.get("cuuren_projectId")
            }
          )
        }).then((data) => {
          if (data && data.code === 0) {
            this.res =  data.data
            const values = [];
            this.res.projectCo2List.forEach(item=>{
              let val = [item.pname,item.proType,item.value]
               values.push(val)
            })
            this.tableConfig = {
              header: ['项目名称', '项目类型', '减排量（tCO2e）'],
                // columnWidth: [200, 100, 100],
                rowNum: 4,
                headerBGC: '#3098d5',
                data: values
            }
            this.pieOption = {
              series: [
                {
                  type: 'gauge',
                  startAngle: -Math.PI / 2,
                  endAngle: Math.PI * 1.5,
                  arcLineWidth: 10,
                  data: [
                    { name: 'itemA', value: Number((this.res.totalPfValue / this.res.totalTarget *100).toFixed(2)) }
                  ],
                  axisLabel: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  pointer: {
                    show: false
                  },
                  dataItemStyle: {
                    lineCap: 'round'
                  },
                  details: {
                    show: true,
                    valueToFixed: 2,
                    formatter: '{value}%',
                    style: {
                      fill: '#1ed3e5',
                      fontSize: 30
                    }
                  }
                }
              ]
            },

            this.drawLine()
            this.drawBar(this.res.perMonthVal)
          }
          this.dataListLoading = false;
        })

      },
      objArraySort(objArr, key)
      {
        let result = objArr.slice(0);
        return result.sort((a, b) => parseInt(a[key]) - parseInt(b[key]));
      },
      drawLine() {
        this.$nextTick(() => {
          const chart = echarts.init(document.querySelector('#manage-line'))
          chart.setOption({
            grid: {
              left: '5%',
              right: '5%',
              top: '10%',
              bottom: '10%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: ['0年', '5年', '10年', '15年', '20年', '15年'],
              axisLine: {
                lineStyle: {
                  color: this.activeSetting.name === 'd2' ? '#333' : '#999'
                },
              },
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: this.activeSetting.name === 'd2' ? '#333' : '#999'
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#999']
                },
              },
            },
            legend: {
              right: 20,
              textStyle: {
                color: this.activeSetting.name === 'd2' ? '#333' : '#ccc'
              },
            },
            series: [
              {
                data: [10.42, 30.61, 50.11, 80.43, 90.22, 100.99],
                type: 'line',
                smooth: true,
                // name: '昨日',
              }
            ]
          })
        })
      },
      drawBar(data) {
        let valueArry = []
        Object.keys(data).forEach((key) => {
          valueArry.push({"id":key,"value":data[key]})
        })
        valueArry = this.objArraySort(valueArry, "id")
        let ydata = valueArry.map(i=>i.value)

        this.$nextTick(() => {
          const chart = echarts.init(document.querySelector('#manage-bar'))
          chart.setOption({
            grid: {
              left: '10%',
              right: '5%',
              top: '10%',
              bottom: '10%'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              data: [1,2,3,4,5,6,7,8,9,10,11,12].map(i => i + '月'),
              axisLine: {
                lineStyle: {
                  color: this.activeSetting.name === 'd2' ? '#333' : '#999'
                },
              },
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: this.activeSetting.name === 'd2' ? '#333' : '#999'
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#999']
                },
              },
            },
            series: [
              {
                data: ydata,
                type: 'bar'
              }
            ]
          })
        })
      },
    },
  }
</script>

<style>
</style>
